import { Img } from "esy-ui"
import { imgLazyloadScroll } from "esy-tools"
import React from "react"

const imgs = [
    "https://img0.baidu.com/it/u=1020316933,328099041&fm=253",
    "https://img0.baidu.com/it/u=1027172276,3213211156&fm=253",
    "https://img2.baidu.com/it/u=834456520,1668269921&fm=253",
    "https://img1.baidu.com/it/u=2205290336,1812703391&fm=253",
    "https://img0.baidu.com/it/u=1754070407,1772795634&fm=253",
    "https://img1.baidu.com/it/u=3014466028,192139760&fm=253",
    "https://img0.baidu.com/it/u=891518267,1767937477&fm=253",
    "https://img2.baidu.com/it/u=2974117594,116531299&fm=253",
    "https://img1.baidu.com/it/u=2395809101,412709917&fm=253"
]

// 这是子组件
const Content = () => {
    return imgs.map((url, i) => <Img className="w-full object-contain" key={i} src={url} />)
}

// 这是页面组件
export const DemoR1 = () => {
    React.useEffect(() => {
        // 页面组件加载开启监听
        // 注意：当浏览器支持 IntersectionObserver API 或者 支持 HTMLImageElement.loading 属性时，该监听无效
        const reomveLister = imgLazyloadScroll()
        return () => {
            // 页面组件卸载移除监听
            reomveLister()
        }
    }, [])

    return (
        <div className="h-40 overflow-y-auto show-thumb w-full border border-solid border-primary">
            <Content />
        </div>
    )
}

export const demoR1Json = `
import { Img } from "esy-ui"
import { imgLazyloadScroll } from "esy-tools"
import React from "react"

const imgs = [
    "https://img0.baidu.com/it/u=1020316933,328099041&fm=253",
    "https://img0.baidu.com/it/u=1027172276,3213211156&fm=253",
    "https://img2.baidu.com/it/u=834456520,1668269921&fm=253",
    "https://img1.baidu.com/it/u=2205290336,1812703391&fm=253",
    "https://img0.baidu.com/it/u=1754070407,1772795634&fm=253",
    "https://img1.baidu.com/it/u=3014466028,192139760&fm=253",
    "https://img0.baidu.com/it/u=891518267,1767937477&fm=253",
    "https://img2.baidu.com/it/u=2974117594,116531299&fm=253",
    "https://img1.baidu.com/it/u=2395809101,412709917&fm=253"
]

// 这是子组件
const Content = () => {
    return imgs.map((url, i) => <Img className="w-full object-contain" key={i} src={url} />)
}

// 这是页面组件
export const DemoR1 = () => {
    React.useEffect(() => {
        // 页面组件加载开启监听
        // 注意：当浏览器支持 IntersectionObserver API 或者 支持 HTMLImageElement.loading 属性时，该监听无效
        const reomveLister = imgLazyloadScroll()
        return () => {
            // 页面组件卸载移除监听
            reomveLister()
        }
    }, [])

    return (
        <div className="h-40 overflow-y-auto show-thumb w-full border border-solid border-primary">
            <Content />
        </div>
    )
}
`
